﻿@page "/maps/marker"

@using Syncfusion.Blazor.Maps
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the top 25 populated cities in the world by displaying the markers in their locations.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render the markers in a map. Markers are used to indicate or mark a particular location on the map with desired symbols. Also, options have been provided to bind the shapes and colors to the markers based on the continent from the data source. This is achieved using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker.html#Syncfusion_Blazor_Maps_MapsMarker_ShapeValuePath'>ShapeValuePath</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker.html#Syncfusion_Blazor_Maps_MapsMarker_ColorValuePath'>ColorValuePath</a></code> properties of the <code>MapsMarkerSettings</code>. Tooltip is enabled in this example.</p>
   <p>More information about marker can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/markers'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfMaps Format="N0" UseGroupingSeparator="true">
        <MapsTitleSettings Text="Top 25 populated cities in the world">
            <MapsTitleTextStyle Size="16px"/>
        </MapsTitleSettings>
        <MapsZoomSettings Enable="false"/>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' TValue="string">
                <MapsShapeSettings Fill="#C3E6ED"/>
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" TValue="PopulationCityDetails" DataSource="@PopulatedCities" Shape="MarkerType.Circle" Fill="#FFFFFF" ColorValuePath="@MarkerColorValuePath" ShapeValuePath="@MarkerShapeValuePath">
                        <MapsMarkerBorder Color="#285255" Width="2"/>
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Population" Format="<b>${Name}</b><br>Country: <b>${Country}</b><br>Continent: <b>${Continent}</b><br>Population: <b>${Population}</b>"/>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="http://www.citymayors.com/statistics/largest-cities-population-125.html" target="_blank">www.citymayors.com</a>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width:100%" title="Properties">
                <tbody>
                    <tr style="height: 70px">
                        <td style="width: 70%" class="property-text">
                            <div style="width:80%;">
                            Bind markers shape from data source
                            </div>
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox Checked="@MarkerShape" ValueChange="@MarkerShapeCheckBox" TChecked="bool"/>
                        </td>
                    </tr>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            <div style="width:80%;">
                            Bind markers color from data source
                            </div>
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox Checked="@MarkerColor" ValueChange="@MarkerColorCheckBox" TChecked="bool"/>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    public string MarkerShapeValuePath = null;
    public string MarkerColorValuePath = null;
    public bool MarkerShape = false;
    public bool MarkerColor = false;
    private void MarkerShapeCheckBox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        MarkerShape = args.Checked;
        MarkerShapeValuePath = (MarkerShape) ? "Shape" : null;
    }
    private void MarkerColorCheckBox(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        MarkerColor = args.Checked;
        MarkerColorValuePath = (MarkerColor) ? "Color" : null;
    }
    public class PopulationCityDetails {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
        public double Population { get; set; }
        public string Country { get; set; }
        public string Continent { get; set; }
        public string Color { get; set; }
        public string Shape { get; set; }
    };
    public List<PopulationCityDetails> PopulatedCities = new List<PopulationCityDetails> {
        new PopulationCityDetails { Name="Tokyo", Latitude=35.6894875, Longitude=139.6917064, Population=33200000, Country="Japan", Continent="Asia", Color="red", Shape="Pentagon" },
        new PopulationCityDetails { Name="New York", Latitude=40.7127753, Longitude=-74.0059728, Population=17800000,Country="United States", Continent="North America", Color="green",Shape="Diamond" },
        new PopulationCityDetails { Name="Sao Paulo", Latitude=-23.5505199, Longitude=-46.6333094, Population=17700000,Country="Brazil", Continent="South America", Color="orange",Shape="InvertedTriangle" },
        new PopulationCityDetails { Name="Seoul/Incheon", Latitude=37.566535, Longitude=126.9779692, Population=17500000,Country="South Korea", Continent="Asia", Color="red",Shape="Pentagon"},
        new PopulationCityDetails { Name="Mexico City", Latitude=19.2464696, Longitude=-99.1013498, Population=17400000,Country="Mexico", Continent="North America", Color="green",Shape="Diamond"},
        new PopulationCityDetails { Name="Osaka/Kobe/Kyoto", Latitude=35.0212466, Longitude=135.7555968, Population=16425000,Country="Japan", Continent="Asia", Color="red",Shape="Pentagon" },
        new PopulationCityDetails { Name="Manila", Latitude=14.5995124, Longitude=120.9842195, Population=14750000,Country="Philippines", Continent="Asia", Color="red",Shape="Pentagon" },
        new PopulationCityDetails { Name="Mumbai", Latitude=19.0759837, Longitude=72.8776559, Population=14350000,Country="India", Continent="Asia", Color="red",Shape="Pentagon" },
        new PopulationCityDetails { Name="Delhi", Latitude=28.6139391, Longitude=77.2090212, Population=14300000,Country="India", Continent="Asia", Color="red",Shape="Pentagon" },
        new PopulationCityDetails { Name="Jakarta", Latitude=-6.17511, Longitude=106.8650395, Population=14250000,Country="Indonesia", Color="red", Continent="Asia",Shape="Pentagon" },
        new PopulationCityDetails { Name="Lagos", Latitude=6.5243793, Longitude=3.3792057, Population=13400000, Continent="Africa",Country="Nigeria", Color="blue",Shape="Rectangle" },
        new PopulationCityDetails { Name="Kolkata", Latitude=22.572646, Longitude=88.363895, Population=12700000,Country="India", Continent="Asia", Color="red",Shape="Pentagon" },
        new PopulationCityDetails { Name="Cairo", Latitude=30.0444196, Longitude=31.2357116, Population=12200000,Country="Egypt", Continent="Africa", Color="blue",Shape="Rectangle" },
        new PopulationCityDetails { Name="Los Angeles", Latitude=34.0522265, Longitude=-118.2436596, Population=11789000, Continent="North America",Country="United States", Color="green",Shape="Diamond" },
        new PopulationCityDetails { Name="Buenos Aires", Latitude=-34.6036844, Longitude=-58.3815591, Population=11200000,Country="Argentina", Color="orange", Continent="South America",Shape="InvertedTriangle" },
        new PopulationCityDetails { Name="Rio de Janeiro", Latitude=-22.9068467, Longitude=-43.1728965, Population=10800000,Country="Brazil", Color="orange", Continent="South America",Shape="InvertedTriangle" },
        new PopulationCityDetails { Name="Moscow", Latitude=55.755826, Longitude=37.6173, Population=10500000,Country="Russia", Color="yellow", Continent="Europe",Shape="Triangle" },
        new PopulationCityDetails { Name="Shanghai", Latitude=31.2303904, Longitude=121.4737021, Population=10000000,Country="China", Color="red", Continent="Asia",Shape="Pentagon" },
        new PopulationCityDetails { Name="Karachi", Latitude=25.0700428, Longitude=67.2847875, Population=9800000,Country="Pakistan", Color="red", Continent="Asia",Shape="Pentagon"},
        new PopulationCityDetails { Name="Paris", Latitude=48.856614, Longitude=2.3522219, Population=9645000,Country="France", Color="yellow", Continent="Europe",Shape="Triangle" },
        new PopulationCityDetails { Name="Istanbul", Latitude=41.0082376, Longitude=28.9783589, Population=9000000,Country="Istanbul", Color="yellow", Continent="Europe",Shape="Triangle" },
        new PopulationCityDetails { Name="Nagoya", Latitude=35.1814464, Longitude=136.906398, Population=9000000,Country="Japan", Color="red", Continent="Asia",Shape="Pentagon" },
        new PopulationCityDetails { Name="Beijing", Latitude=39.9041999, Longitude=116.4073963, Population=8614000,Country="China", Color="red", Continent="Asia",Shape="Pentagon" },
        new PopulationCityDetails { Name="Chicago", Latitude=41.8781136, Longitude=-87.6297982, Population=8308000,Country="United States", Color="green", Continent="North America",Shape="Diamond"},
        new PopulationCityDetails { Name="London", Latitude=51.5073509, Longitude=-0.1277583, Population=8278000,Country="United Kingdom", Color="yellow", Continent="Europe",Shape="Triangle" }
    };
}